<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <!-- 自定义指令 v-big 所谓的自定义指令其实就是个函数去操作DOM元素 -->
        <h2>当前值：<span v-text="n"></span></h2>
        <h2>大10倍后的值：<span v-big="n"></span></h2>
        <!-- 如果自定义指令多个单词直接拼接，使用-拼接，然后在自定义指令里面使用''包起来 -->
        <!-- <h2>大10倍后的值：<span v-big-number="n"></span></h2> -->
        <button @click="n++">点我++</button>

    </div>


</body>
<script type="text/javascript">

    const vm = new Vue({
        el: "#root",
        data: {
            n: 1,
        },
        // 自定义指令放到这里
        directives: {
            // element参数：表示使用了v-big指令的标签
            // binding参数：表示给v-big指令
            big(element, binding) {
        // 'big-number'(element, binding) {     // 如果多个单词拼接的自定义指令，需要这样写
                element.innerHTML = binding.value * 10;
            }

        },
        methods: {



        }
    })
</script>

</html>